<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		onStart();
		$("#addCase").click(function() {
			var caseObj = getDummyCaseObject();
			caseObj.caseRefNo = document.getElementById("caseRefNo").value;
			caseObj.plaintiff = document.getElementById("plaintiff").value;
			caseObj.respondent = document.getElementById("respondent").value;
			caseObj.caseNote = document.getElementById("caseNote").value;
			addCase(caseObj);
		});
		$("#showCase").click(function() {
			getAllCases();
		});
		$("#addDate").click(function() {
			var caseDate = document.getElementById("date").value;
			var dateNote = document.getElementById("dateNote").value;
			var caseId = document.getElementById("caseId").value;
			addDate(caseId, caseDate, dateNote)
		});
		$("#deleteCase").click(function() {
			deleteCase("1");
			//deleteCase(document.getElementById("delete").value);
		});
	});
</script>
</head>
<body>

<div data-role="page">

	<div data-role="panel" id="myPanel" data-theme="b" data-display="overlay"> 
     <ol data-role="listview" data-theme="b">
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li data-theme="a"><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ol>
    <br>
    
    <ul data-role="listview">
      <li><a href="#">List Item</a></li>
      <li data-theme="a"><a href="#">List Item</a></li>
      <li data-theme="b"><a href="#">List Item</a></li>
      <li data-theme="a"><a href="#">List Item</a></li>
    </ul>
    <br>
  </div> 

  <div data-role="header" data-position="fixed">
    <a href="#myPanel" class="ui-btn ui-corner-all ui-shadow ui-icon-bullets ui-btn-icon-left">Menu</a>
    <h1>Legal Diary</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
  </div>

  <div data-role="main" class="ui-content">
    
		<label for="heading">Enter Case Data</label>
		<input type="text" name="caseRef" id="caseRefNo" placeholder="Case Reference Number" />
		<input type="text" name="plantiff" id="plaintiff" placeholder="Plaintiff" />
		<input type="text" name="respondent" id="respondent" placeholder="Respondent" />
		<textarea name="notes" id="caseNote" placeholder="Notes" cols="5" rows="2"></textarea>
		
		<input type="button" id="addCase" value="Submit" />
		
  </div>

  <div data-role="footer" data-position="fixed">
    <a href="#myPanel" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left" style="margin-left:100px;">Add Case</a>
  </div>
</div>

</body>
</html>
